<template>
  <div id="view-register">
    <div class="register-left">
      <span class="intro">{{ intro }}</span>
    </div>
    <div class="register-right">
      <div class="register-container">
        <h2>W E P A R T Y</h2>
        <h1>注册</h1>
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-form-model-item ref="username" prop="username">
            <a-input
              size="large"
              v-model="form.username"
              addon-before="+86"
              placeholder="Phone"
            >
              <a-icon
                slot="prefix"
                type="phone"
                style="color: rgba(0, 0, 0, 0.25)"
            /></a-input>
          </a-form-model-item>
          <a-form-model-item ref="password" prop="password">
            <a-input-password
              class="a-input"
              v-model="form.password"
              size="large"
              type="password"
              placeholder="Password"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input-password>
          </a-form-model-item>
          <a-form-model-item ref="confirmedPassword" prop="confirmedPassword">
            <a-input-password
              class="a-input"
              v-model="form.confirmedPassword"
              size="large"
              type="password"
              placeholder="Comfirm Password"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input-password>
          </a-form-model-item>
          <!-- 注册按钮 -->
          <a-form-model-item>
            <a-button size="large" type="primary" @click="onRegister" block>
              register
            </a-button>
          </a-form-model-item>
        </a-form-model>
        <!-- 登录 -->
        <div class="register-container">
          <span>
            已有账号？
            <router-link to="./login">登录</router-link>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      intro:
        "Join WeParty to release and participate in campus activities more conveniently! Join WeParty to release and participate in campus activities more conveniently!",
      form: {
        username: "",
        password: "",
        confirmedPassword: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "Please input username",
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input password",
            trigger: "change",
          },
        ],
        comfirmedPassword: [
          {
            required: true,
            message: "Please confirm password",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    onRegister() {
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("object");
          // username: the account for login
          // which using phone number
          let username = that.form.username;
          let password = that.form.password;
          let comfirmedPassword = that.form.confirmedPassword;
          console.log(
            `username=${username}, password=${password}, cofirmedPassword=${comfirmedPassword}`
          );
          if (password != comfirmedPassword) {
            console.log(password);
            console.log(comfirmedPassword);
            that.$message.warning("两次密码不一致");
          } else {
            that.axios
              .post(`${that.GLOBAL.site}/users`, {
                phoneNumber: username,
                password: password,
              })
              .then(function (res) {
                if (res.status == 200) {
                  console.log(res);
                  let data = res.data;
                  let result = data.result;
                  // Set id, the PRIMARY KEY in database of back-end
                  // Update id in this.GLOBAL
                  that.GLOBAL.id = result.id;
                  sessionStorage.setItem("id", result.id);
                } else {
                  that.$message.error(
                    `注册失败，error_code=${res.data.error_code}`
                  );
                }
              })
              .catch(function (error) {
                console.error(error);
                that.$message.error(`Error thrown in register`);
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.center() {
  align-items: center;
  justify-content: center;
}

#view-register {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;

  @media (max-width: 960px) {
    .register-left {
      display: none;
    }
  }

  .register-left {
    background: url("https://gushichen.gitee.io/img/post-bg-rwd.jpg") center
      center no-repeat;
    width: 40%;
    height: 100%;
    position: relative;
    span {
      position: absolute;
      color: white;
      bottom: 52px;
      margin: 0 30px 10% 30px;
      font-size: 16px;
    }
  }

  .register-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .center();
    h2 {
      color: #bfbfbf;
    }
    h1 {
      margin: 0 0 36px 0;
      font-size: 52px;
    }
    .register-form-item {
      display: flex;
      justify-content: center;
    }

    .register-container {
      width: 40%;
    }
  }
}
</style>